<template>
  <el-dialog title="租赁合同查看" custom-class="contractPreview" :visible.sync="viewDialogVisible" width="85%" :before-close="close" :close-on-click-modal="false">
    <el-tabs v-model="activeName">
      <el-tab-pane label="合同信息" name="first">
        <!--合同信息-->
        <el-row :gutter="16">
          <el-col :span="6">
            <contractPreview :pdfUrl="pdfUrl" :contractName="contractName" />
          </el-col>
          <el-col :span="18">
            <el-card>
              <div slot="header" class="clearfix">
                <span>承租方信息</span>
              </div>
              <div class="text item">
                <el-form class="form-wrap" :model="propForm" size="small" ref="propForm" label-position="top">
                  <el-form-item label="承租方名称:">
                    <span>{{propForm!=null?propForm.clientLesseeName:""}}</span>
                  </el-form-item>
                  <el-form-item label="承租方类型:">
                    <span>{{lessee}}</span>
                  </el-form-item>
                  <!-- 第一行第3列-->
                  <el-form-item v-show="propForm !=null && propForm.clientLesseeType=='0'" label="证件类型:">
                    <span>{{personageCertificate}}</span>
                  </el-form-item>
                  <el-form-item v-show="propForm!=null && propForm.clientLesseeType!='0'" label="证件类型:">
                    <span>{{commercialCertificate}}</span>
                  </el-form-item>
                  <!-- 第一行第4列-->
                  <el-form-item label="证件号码:">
                    <span>{{propForm!=null?propForm.certificateNum:""}}</span>
                  </el-form-item>

                  <!-- 第二行-->
                  <!-- 如果不是 "个人"，则会将下面一行会显示出来-->
                  <el-form-item v-show="propForm!=null && propForm.clientLesseeType!=0" label="法人代表:">
                    <span>{{propForm!=null?propForm.legalPerson:""}}</span>
                  </el-form-item>
                  <el-form-item v-show="propForm!=null &&  propForm.clientLesseeType!=0" label="身份证号码:">
                    <span>{{propForm!=null?propForm.legalIdentityCard:""}}</span>
                  </el-form-item>
                  <el-form-item v-show="propForm!=null " label="手机号码:">
                    <span>{{propForm!=null?propForm.phoneNum:""}}</span>
                  </el-form-item>
                  <el-form-item v-show="propForm!=null && propForm.clientLesseeType!=0" label="联系电话:">
                    <span>{{propForm!=null?propForm.telephone:""}}</span>
                  </el-form-item>
                  <el-form-item v-show="propForm!=null " label="详细地址:">
                    <span>{{propForm!=null?propForm.address:""}}</span>
                  </el-form-item>
                  <el-form-item v-show="propForm!=null && propForm.clientLesseeType!=0" label="行业类别:">
                    <span>{{propForm!=null?propForm.categroyEmployment:""}}</span>
                  </el-form-item>
                  <el-form-item v-show="propForm!=null && propForm.clientLesseeType!=0" label="产业引进部门:">
                    <span>{{propForm!=null?propForm.introduceUnit:""}}</span>
                  </el-form-item>
                </el-form>
              </div>
            </el-card>

            <el-card>
              <div slot="header" class="clearfix">
                <span>物业信息</span>
              </div>
              <div class="text item">
                <el-row>
                  <el-table :data="propertyInformation" stripe align="left" style="width: 100%">
                    <el-table-column type="index" align="left" width="50" />
                    <el-table-column label="物业名称" align="left" prop="propertyName" width="150">
                      <template slot-scope="scope">
                        <el-link type="primary" :underline="false" @click="$refs.propertyPreview.open(scope.row)">{{scope.row.propertyName}}</el-link>
                      </template>
                    </el-table-column>
                    <el-table-column label="建筑面积（㎡）" align="left" prop="buildingArea" width="100" />
                    <el-table-column label="市场评估租金单价（元/㎡/月）" align="left" prop="assessPrice" width="100" v-if="false" />
                    <el-table-column prop="price" align="left" label="单价（元/㎡/月）" width="100" />
                    <el-table-column prop="remarks" align="left" label="说明" width="100" />
                  </el-table>
                </el-row>
              </div>
            </el-card>
            <el-card>
              <div slot="header" class="clearfix">
                <span>租金标准</span>
              </div>
              <div class="text item">
                <el-row>
                  <el-table :data="rentFeeInformation" stripe style="width: 100%">
                    <el-table-column prop="startDate" label="开始时间" width="100" />
                    <el-table-column prop="endDate" label="结束时间" width="100" />
                    <el-table-column prop="priceFinal" label="月租金" width="100" />
                    <el-table-column prop="remarks" label="说明" width="100" />
                  </el-table>
                </el-row>
              </div>
            </el-card>
            <el-card>
              <div slot="header" class="clearfix">
                <span>其他款项</span>
              </div>
              <div class="text item">
                <el-row>
                  <el-table :data="contractFee" style="width: 100%">
                    <el-table-column prop="chargeProjectName" label="费用项目名称" width="180" />
                    <el-table-column prop="amount" label="金额" width="180" />
                  </el-table>
                </el-row>
              </div>
            </el-card>
            <el-card>
              <div slot="header" class="clearfix">
                <span>合同信息</span>
              </div>
              <div class="text item">
                <el-row>
                  <el-form :model="formData" class="form-wrap" size="small">
                    <el-form-item label="签订方式" prop="signType">
                      <span>{{signType}}</span>
                    </el-form-item>
                    <el-form-item label="收取方式" prop="feeType">
                      <span>{{feeType}}</span>
                    </el-form-item>
                    <el-form-item v-if="formData.feeType=='6'" label="自定义收费周期" prop="feeTypeValue">
                      <span>{{formData.feeTypeValue}}</span>
                    </el-form-item>
                    <el-form-item label="应收日" prop="feeDate">
                      <span>{{formData.feeDate}}</span>
                    </el-form-item>
                    <el-form-item label="合同订日期" prop="signDate">
                      <span>{{formData.signDate}}</span>
                    </el-form-item>
                    <el-form-item label="合同开始日期" prop="startDate">
                      <span>{{formData.startDate}}</span>
                    </el-form-item>
                    <el-form-item label="合同结束日期" prop="endDate">
                      <span>{{formData.endDate}}</span>
                    </el-form-item>
                    <el-form-item label="装修免租期" prop="rentStartDate">
                      <span>{{formData.freeFeeStart}}-{{formData.freeFeeEnd}}</span>
                    </el-form-item>

                    <el-form-item label="起租日期" prop="rentStartDate">
                      <span>{{formData.rentStartDate}}</span>
                    </el-form-item>
                    <el-form-item label="合同类型">
                      <span>{{formData.type|dict('rent_contract_type')}}</span>
                    </el-form-item>
                    <el-form-item label="合同细类">{{formData.subType|dict('rent_contract_sub_type')}}</el-form-item>
                    <el-form-item label="建筑面积">
                      <span>{{formData.subType|dict('rent_contract_sub_type')}}</span>
                    </el-form-item>
                    <el-form-item label="月租金">
                      <span>{{formData.rentAmount}}</span>
                    </el-form-item>
                    <el-form-item label="管理所" prop="administrativeOffice">{{formData.administrativeOffice|dict('administrative_office')}}</el-form-item>
                    <el-form-item label="备注" prop="remarks">
                      <span>{{formData.remarks}}</span>
                    </el-form-item>
                  </el-form>
                </el-row>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="收费明细" name="second">
        <contractDetails ref="contractDetails" />
      </el-tab-pane>
      <el-tab-pane label="变更记录" name="third">
        <contractChange ref="contractChange" />
      </el-tab-pane>
      <el-tab-pane label="续签记录" name="fourth">
        <contractRenew ref="contractRenew" />
      </el-tab-pane>
      <el-tab-pane label="退租记录" name="back">
        <contractBack ref="contractBack" />
      </el-tab-pane>
      <el-tab-pane label="审核记录" name="approve">
        <approval-record style="margin-top: 20px;" v-for="(item, index) in recordingLlist" :key="index" v-bind="item"></approval-record>
      </el-tab-pane>
      <el-tab-pane label="附件" name="attatch">
        <v-upload ref="rentContractFileUpload" :busId="formData.rentContractId" modelType="rent-contract" :isShowFileList="true" :isView="true"></v-upload>
      </el-tab-pane>
    </el-tabs>
    <div slot="footer">
      <el-button @click="$bus.$emit('operationLog', rentContractId)" class="btn">操作日志</el-button>
      <el-button @click="close">关闭</el-button>
    </div>
    <!-- 物业查看 -->
    <propertyPreview ref="propertyPreview" />
  </el-dialog>
</template>
<script src="./view.js"></script>
<style lang="scss">
@include formWrap();
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
</style>

<style lang="scss">
.contractPreview {
  .el-tabs__header {
    margin-bottom: 16px;
  }
  .el-dialog__body {
    padding: 14px 24px 0;
  }
  .el-card {
    margin-bottom: 16px;
  }
}
</style>
